<script setup>
	import { ref,reactive  } from 'vue'
	import { useUserStore } from '../../store/idnex.js'
	import { onShow } from '@dcloudio/uni-app'
	import waterMarker from "../../components/sdq-watermarker/waterMarker.vue"
	import { getWatermar } from '../../api/login.js'
		
		const watermarText = ref('')
		const isHide = ref(false)
		
		
		getWatermar().then(res => {
			if(!res.data.hide){
				watermarText.value = res.data.text
				isHide.value = true
			}
		})
	
	const userStore = useUserStore()
	const user = ref(userStore.user)
	onShow(() => {
		user.value = userStore.user
	})
	
	
	
	const extraIcon = {
		color: '#353535',
		size: '26',
		type: 'undo'
	}
	
	const settingIcon = {
		color: '#353535',
		size: '26',
		type: 'gear-filled'
	}
	
	const handleClick = () => {
		console.log(1);
		uni.switchTab({
			url:'/pages/order/index'
		})
	}
	
	const logoutDialog = ref(null)
	
	//退出方法
	const handleLogout = () => {
		// 打开对话框
		logoutDialog.value.open()
	}
	
	//确定退出
	const rightLogOut = () => {
		console.log('logout');
		// 先清空仓库中的用户
		userStore.removeUser()
		// 然后重定向到登录页面
		uni.showToast({
			title:'退出成功'
		})
		setTimeout(() => {
			uni.reLaunch({
				url:'/pages/index/index'
			})
		}, 600)
	}
	
	// 点击个人信息
	const handleSetInfo = () => {
		uni.navigateTo({
			url:'/pages/index/register?state=update'
		})
	}
</script>

<template>
	<view class="container">
		<waterMarker v-if="isHide" col="4" row="8" :text="watermarText" opacity="0.1" color="black" rotate="-30deg"></waterMarker>
		
		<!-- 头像和姓名 -->
		<view class="head">
			<view class="header-image">
				<image src="../../static/logo.png" mode="scaleToFill"></image>
			</view>
			<view class="header-text">
				<view class="text-item">
					<span>{{ user.name }} </span>
					<span>账号：{{ user.username }}</span>
				</view>
				<view class="text-item rgiht">
					<span>bim：{{ user.bim }}</span>
					<span>状态：{{ user.bimRemake }}</span>
				</view>
			</view>
		</view>
		
		<!-- 中间列表 -->
		<view class="body">
			<uni-list>
				
				<!-- <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="设置" /> -->
				<uni-list-item showArrow clickable @click="handleClick">
					<template #header>
						<image class="list-head" src="../../static/images/tab_order.png" mode="scaleToFill"></image>
					</template>
					<template #body>
						<span class="list-body"> &nbsp;&nbsp;我的订单</span>
					</template>
				</uni-list-item>
				
				<uni-list-item @click="handleSetInfo" :extra-icon="settingIcon" :show-extra-icon="true"  showArrow clickable>
					<template #body>
						<span class="list-body">个人信息</span>
					</template>
				</uni-list-item>
				
				<uni-list-item @click="handleLogout" :extra-icon="extraIcon" :show-extra-icon="true"  showArrow clickable>
					<template #body>
						<span class="list-body">退出登录</span>
					</template>
				</uni-list-item>
				
			</uni-list>
		</view>

		<!-- 提示窗示例 -->
		<uni-popup ref="logoutDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="退出登录" content="您确定要退出吗？" @confirm="rightLogOut"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<style scoped lang="scss">
	.state {
		margin-left: 30rpx;
	}
	.list-body {
		margin-left: 50rpx;
		font-size: 35rpx;
	}
	.list-head {
		width: 50rpx;
		height: 50rpx;
	}
	.body {
		margin-top: 100rpx;
	}
	.head {
		display: flex;
		align-items: center;
		width: 100%;	
		height: 200rpx;
		.header-text {
			margin-top: 80rpx;
			height: 50%;
			width: 60%;
			margin-left: 30rpx;
			display: flex;
			.text-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.rgiht {
				flex: 1;
				margin-left: 100rpx;
			}
			span {
				display: block;
				flex-wrap: wrap;
			}
		}
		.header-image {
			margin-left: 50rpx;
			line-height: 325rpx;
			width: 150rpx;
			height: 150rpx;
			image {
				border-radius: 100rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>